import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Select } from 'antd';
import request from '../../utils/request';
import API from '../../utils/api';
import 'codemirror/lib/codemirror.css';
import 'code-mirror-themes/themes/all-hallow-eve.css';
// import 'code-mirror-themes/themes/amy.css';
// import 'code-mirror-themes/themes/argonaut.css';
// import 'code-mirror-themes/themes/arona.css';
// import 'code-mirror-themes/themes/bbedit.css';
// import 'code-mirror-themes/themes/bespin.css';
// import 'code-mirror-themes/themes/birds-of-paradise.css';
// import 'code-mirror-themes/themes/black-pearl.css';
// import 'code-mirror-themes/themes/black-pearl-ii.css';
// import 'code-mirror-themes/themes/blackboard.css';
// import 'code-mirror-themes/themes/blackboard-black.css';
// import 'code-mirror-themes/themes/bongzilla.css';
// import 'code-mirror-themes/themes/chanfle.css';
// import 'code-mirror-themes/themes/chrome-devtools.css';
// import 'code-mirror-themes/themes/classic-modified.css';
// import 'code-mirror-themes/themes/clouds.css';
// import 'code-mirror-themes/themes/clouds-midnight.css';
// import 'code-mirror-themes/themes/cobalt.css';
// import 'code-mirror-themes/themes/coda.css';
// import 'code-mirror-themes/themes/cssedit.css';
// import 'code-mirror-themes/themes/cube2media.css';
// import 'code-mirror-themes/themes/darkpastel.css';
// import 'code-mirror-themes/themes/dawn.css';
// import 'code-mirror-themes/themes/demo.css';
// import 'code-mirror-themes/themes/django.css';
// import 'code-mirror-themes/themes/django-(smoothy).css';
// import 'code-mirror-themes/themes/eiffel.css';
// import 'code-mirror-themes/themes/emacs-strict.css';
// import 'code-mirror-themes/themes/espresso.css';
// import 'code-mirror-themes/themes/espresso-libre.css';
// import 'code-mirror-themes/themes/espresso-soda.css';
// import 'code-mirror-themes/themes/espresso-tutti.css';
// import 'code-mirror-themes/themes/fade-to-grey.css';
// import 'code-mirror-themes/themes/fake.css';
// import 'code-mirror-themes/themes/fantasyscript.css';
// import 'code-mirror-themes/themes/fluidvision.css';
// import 'code-mirror-themes/themes/freckle.css';
// import 'code-mirror-themes/themes/friendship-bracelet.css';
// import 'code-mirror-themes/themes/github.css';
// import 'code-mirror-themes/themes/glitterbomb.css';
// import 'code-mirror-themes/themes/happy-happy-joy-joy-2.css';
// import 'code-mirror-themes/themes/idle.css';
// import 'code-mirror-themes/themes/idlefingers.css';
// import 'code-mirror-themes/themes/iplastic.css';
// import 'code-mirror-themes/themes/ir_black.css';
// import 'code-mirror-themes/themes/ir_white.css';
// import 'code-mirror-themes/themes/johnny.css';
// import 'code-mirror-themes/themes/juicy.css';
// import 'code-mirror-themes/themes/krtheme.css';
// import 'code-mirror-themes/themes/kuroir.css';
// import 'code-mirror-themes/themes/lazy.css';
// import 'code-mirror-themes/themes/lowlight.css';
// import 'code-mirror-themes/themes/mac-classic.css';
// import 'code-mirror-themes/themes/made-of-code.css';
// import 'code-mirror-themes/themes/magicwb-(amiga).css';
// import 'code-mirror-themes/themes/merbivore.css';
// import 'code-mirror-themes/themes/merbivore-soft.css';
// import 'code-mirror-themes/themes/monoindustrial.css';
// import 'code-mirror-themes/themes/monokai.css';
// import 'code-mirror-themes/themes/monokai-bright.css';
// import 'code-mirror-themes/themes/monokai-fannonedition.css';
// import 'code-mirror-themes/themes/monokai-sublime.css';
// import 'code-mirror-themes/themes/mreq.css';
// import 'code-mirror-themes/themes/nightlion.css';
// import 'code-mirror-themes/themes/notebook.css';
// import 'code-mirror-themes/themes/oceanic.css';
// import 'code-mirror-themes/themes/oceanic-muted.css';
// import 'code-mirror-themes/themes/pastels-on-dark.css';
// import 'code-mirror-themes/themes/pastie.css';
// import 'code-mirror-themes/themes/plasticcodewrap.css';
// import 'code-mirror-themes/themes/prospettiva.css';
// import 'code-mirror-themes/themes/putty.css';
// import 'code-mirror-themes/themes/rails-envy.css';
// import 'code-mirror-themes/themes/railscasts.css';
// import 'code-mirror-themes/themes/rdark.css';
// import 'code-mirror-themes/themes/rhuk.css';
// import 'code-mirror-themes/themes/ryan-light.css';
// import 'code-mirror-themes/themes/sidewalkchalk.css';
// import 'code-mirror-themes/themes/slush-&-poppies.css';
// import 'code-mirror-themes/themes/smoothy.css';
// import 'code-mirror-themes/themes/solarized-(dark).css';
// import 'code-mirror-themes/themes/solarized-(light).css';
// import 'code-mirror-themes/themes/spacecadet.css';
// import 'code-mirror-themes/themes/spectacular.css';
// import 'code-mirror-themes/themes/summer-sun.css';
// import 'code-mirror-themes/themes/summerfruit.css';
// import 'code-mirror-themes/themes/sunburst.css';
// import 'code-mirror-themes/themes/swyphs-ii.css';
// import 'code-mirror-themes/themes/tango.css';
// import 'code-mirror-themes/themes/text-ex-machina.css';
// import 'code-mirror-themes/themes/tomorrow.css';
// import 'code-mirror-themes/themes/tomorrow-night.css';
// import 'code-mirror-themes/themes/tomorrow-night-blue.css';
// import 'code-mirror-themes/themes/tomorrow-night-bright.css';
// import 'code-mirror-themes/themes/tomorrow-night-eighties.css';
// import 'code-mirror-themes/themes/toulousse-lautrec.css';
// import 'code-mirror-themes/themes/toy-chest.css';
// import 'code-mirror-themes/themes/tubster.css';
// import 'code-mirror-themes/themes/twilight.css';
// import 'code-mirror-themes/themes/venom.css';
// import 'code-mirror-themes/themes/vibrant-fin.css';
// import 'code-mirror-themes/themes/vibrant-ink.css';
// import 'code-mirror-themes/themes/vibrant-tango.css';
// import 'code-mirror-themes/themes/zenburnesque.css';
import CodeMirror from 'codemirror';
import './index.less';

// const styles = [
//     'all-hallow-eve',
//     'amy',
//     'argonaut',
//     'arona',
//     'bbedit',
//     'bespin',
//     'birds-of-paradise',
//     'black-pearl',
//     'black-pearl-ii',
//     'blackboard',
//     'blackboard-black',
//     'bongzilla',
//     'chanfle',
//     'chrome-devtools',
//     'classic-modified',
//     'clouds',
//     'clouds-midnight',
//     'cobalt',
//     'coda',
//     'cssedit',
//     'cube2media',
//     'darkpastel',
//     'dawn',
//     'demo',
//     'django',
//     'django-(smoothy)',
//     'eiffel',
//     'emacs-strict',
//     'espresso',
//     'espresso-libre',
//     'espresso-soda',
//     'espresso-tutti',
//     'fade-to-grey',
//     'fake',
//     'fantasyscript',
//     'fluidvision',
//     'freckle',
//     'friendship-bracelet',
//     'github',
//     'glitterbomb',
//     'happy-happy-joy-joy-2',
//     'idle',
//     'idlefingers',
//     'iplastic',
//     'ir_black',
//     'ir_white',
//     'johnny',
//     'juicy',
//     'krtheme',
//     'kuroir',
//     'lazy',
//     'lowlight',
//     'mac-classic',
//     'made-of-code',
//     'magicwb-(amiga)',
//     'merbivore',
//     'merbivore-soft',
//     'monoindustrial',
//     'monokai',
//     'monokai-bright',
//     'monokai-fannonedition',
//     'monokai-sublime',
//     'mreq',
//     'nightlion',
//     'notebook',
//     'oceanic',
//     'oceanic-muted',
//     'pastels-on-dark',
//     'pastie',
//     'plasticcodewrap',
//     'prospettiva',
//     'putty',
//     'rails-envy',
//     'railscasts',
//     'rdark',
//     'rhuk',
//     'ryan-light',
//     'sidewalkchalk',
//     'slush-&-poppies',
//     'smoothy',
//     'solarized-(dark)',
//     'solarized-(light)',
//     'spacecadet',
//     'spectacular',
//     'summer-sun',
//     'summerfruit',
//     'sunburst',
//     'swyphs-ii',
//     'tango',
//     'text-ex-machina',
//     'tomorrow',
//     'tomorrow-night',
//     'tomorrow-night-blue',
//     'tomorrow-night-bright',
//     'tomorrow-night-eighties',
//     'toulousse-lautrec',
//     'toy-chest',
//     'tubster',
//     'twilight',
//     'venom',
//     'vibrant-fin',
//     'vibrant-ink',
//     'vibrant-tango',
//     'zenburnesque',
// ];

const Log = () => {
    const [logList, setLogList] = useState([]);
    const [log, setLog] = useState<string | undefined>();
    // const [theme, setTheme] = useState('all-hallow-eve');
    const codeRef = useRef<HTMLDivElement>(null);

    const codeMirror: CodeMirror.Editor | undefined = useMemo(() => {
        if (codeRef && codeRef.current) {
            return CodeMirror(codeRef.current, {
                mode: 'javascript',
                readOnly: true,
                lineNumbers: true,
                theme: 'all-hallow-eve',
            });
        }
        return undefined;
    }, [codeRef.current]);

    // useEffect(() => {
    //     if (theme && codeMirror) {
    //         codeMirror.setOption('theme', theme);
    //     }
    // }, [theme, codeMirror]);

    const handleChangeSelection = useCallback((value: string) => {
        setLog(value);
    }, []);

    useEffect(() => {
        if (!log || !codeMirror) return;
        request(API.LOG_READ, { params: { name: log } }).then((res) => {
            const {
                data: { content = [] },
            } = res;
            codeMirror.setValue(content.join(''));
        });
    }, [log, codeMirror]);

    useEffect(() => {
        request(API.LOG_LIST).then((res) => {
            const {
                data: { fileList = [] },
            } = res;
            if (fileList && fileList.length) {
                setLogList(fileList);
                setLog(fileList[fileList.length - 1]);
            } else {
                setLogList([]);
                setLog(undefined);
            }
        });
    }, []);

    return (
        <div className="log">
            <div style={{ marginBottom: '12px' }}>
                <Select
                    onChange={handleChangeSelection}
                    value={log}
                    placeholder="请选择需要查看的日志文件"
                    allowClear
                >
                    {logList.map((l) => (
                        <Select.Option key={l} value={l}>
                            {l}
                        </Select.Option>
                    ))}
                </Select>
                {/* <Select
                    dropdownMatchSelectWidth={false}
                    style={{ float: 'right' }}
                    value={theme}
                    onChange={(v) => setTheme(v)}
                >
                    {styles.map((k) => (
                        <Select.Option key={k} value={k}>
                            {k}
                        </Select.Option>
                    ))}
                </Select> */}
            </div>
            <div className="code" ref={codeRef} />
        </div>
    );
};

export default Log;
